<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>地区信息管理</title>
	<link rel="stylesheet" type="text/css" href="../css/index.css"></link>
	<script src="../js/common.js"></script>
	<script src="../js/jquery.plugins/jquery.js"></script>
	
	<link rel="stylesheet" type="text/css" href="../js/jquery.plugins/easyui/css/default/easyui.css"></link>
	<link rel="stylesheet" type="text/css" href="../js/jquery.plugins/easyui/css/icon.css"></link>
	<script src="../js/jquery.plugins/easyui/jquery.easyui.min.js"></script>
	<script src="../js/jquery.plugins/easyui/easyui-lang-zh_CN.js"></script>
	<script>
		function showchildren(parentId , span ){
			span = $(span);
			if( span.attr("res")=="0" ){
				span.find( "img" ).attr( "src" , "../images/jia.gif" );
				span.attr("res","1");
				$("#districtBody").find( "tr[root=" +parentId+ "]" ).hide();
				$("#districtBody").find( "tr[parent=" +parentId+ "]" ).hide();
			}else if( span.attr("res") == "1"){
				span.find( "img" ).attr( "src" , "../images/jian.gif" );
				$("#districtBody").find( "tr[root=" +parentId+ "]" ).show();
				$("#districtBody").find( "tr[parent=" +parentId+ "]" ).show();
				span.attr("res","0");
			}else{
				span.find( "img" ).attr( "src" , "../images/jian.gif" );
				span.attr("res","0");
				
				$.ajax({
					url:"findByParent.ht" ,
					data:"parentId="+parentId,
					type:'post',
				   	async:false,
					success:function( data ){
						if( $.trim(data) != '' )
						$( span ).parent().parent().after( data );
				    }
				});
			}
		}
		function update( a , id ){
			var tr = $(a.parentNode.parentNode);
			var postCode = tr.find( "input[id=postCode]" );
			postCode.validatebox({		
				validType:"length[0,6]",
				invalidMessage:"邮编只能在0到6个字符以内。"
			});
			var phoneCode = tr.find( "input[id=phoneCode]" );
			phoneCode.validatebox({		
				validType:"length[0,32]",
				invalidMessage:"区号只能在0到32个字符以内。"
			});
			if( postCode.validatebox( "isValid" ) && phoneCode.validatebox( "isValid" )){
				var param = "id=" + id + "&postCode=" + postCode.val() + "&phoneCode="+phoneCode.val();
				jsonSend("save.ht",param,function(flag){
					if(flag){
						infoMsg( "提示","保存成功" );
					}else{
						errorMsg( "提示","保存失败,请重试!" );
					}
				},false);
			}
		}
	</script>
</head>
<body>
	<!-- 导航部分 -->
	<div class="position">
	您当前的位置：系统管理 &gt;&gt; <a href="list.ht">地区信息管理</a>
	</div>
	<!-- 导航部分结束 -->
	<!-- 搜索部分 -->
	<div style="float:right;margin-right:50px;">
		<form id="searchform" action="list.ht" method="post">
			<table class="search">
				<tr>
					<td>
					<label>地区信息名称:</label>
					<input type="text" name="query[keyword]" value="${pager.query['keyword']}"/>
					<button class="small-btn" type="submit">搜索</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="clear"></div>
	<!-- 搜索部分结束 -->
	
	<!-- 列表部分 -->
	<!-- 分页 -->
	<div class="pageDiv"></div>
	<!-- 分页结束 -->
	<table class="list">
		<thead>
			<tr>
			<th>名称</th>
			<th>省/市/区</th>
			<th>行政区域编码</th>
			<th>邮编</th>
			<th>区号</th>
			<th>操作</th>
			</tr>
		</thead>
		<tbody id="districtBody">
			<c:forEach var="district" items="${ models }">
			<tr>
				<td style="text-align:left;"><span style="cursor:pointer;" onclick="showchildren(${district.id},this);"><img src="../images/jia.gif" alt="查看下一级"/>${district.name }</span></td>
				<td><c:choose>
						<c:when test="${district.type == 1}">省</c:when>
						<c:when test="${district.type == 2}">市</c:when>
						<c:otherwise>区</c:otherwise>
					</c:choose></td>
				<td>${district.code }</td>
				<td><input type="text" name="postCode" id="postCode" value="${district.postCode }"/></td>
				<td><input type="text" name="phoneCode" id="phoneCode" value="${district.phoneCode }"/></td>
				<td><a href="javascript:;" onclick="update(this,${district.id});">修改</a></td>
			</tr>
			</c:forEach>
		</tbody>
	</table>
	<!-- 分页 -->
	<div class="pageDiv"></div>
	<!-- 分页结束 -->
	<!-- 列表部分结束 -->
</body>
</html>